<div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">

        <ul class="layui-nav layui-nav-tree site-demo-nav">

            <li class="layui-nav-item layui-nav-itemed">
                <a class="javascript:;" href="javascript:;">开发工具</a>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="/demo/">调试预览</a>
                    </dd>
                </dl>
            </li>

            <li class="layui-nav-item layui-nav-itemed">
                <a class="javascript:;" href="javascript:;">布局</a>
                <dl class="layui-nav-child">
                    <dd class="">
                        <a href="/demo/grid.html">栅格</a>
                    </dd>
                    <dd class="">
                        <a href="/demo/admin.html">后台布局</a>
                    </dd>
                </dl>
            </li>

            <li class="layui-nav-item layui-nav-itemed">
                <a class="javascript:;" href="javascript:;">基本元素</a>
                <dl class="layui-nav-child">
                    <dd class="">
                        <a href="/demo/button.html">按钮</a>
                    </dd>
                    <dd class="">
                        <a href="/demo/form.html">表单</a>
                    </dd>
                    <dd class="">
                        <a href="/demo/nav.html">导航/面包屑</a>
                    </dd>
                    <dd class="">
                        <a href="/demo/tab.html">选项卡</a>
                    </dd>
                    <dd class="">
                        <a href="/demo/progress.html">进度条</a>
                    </dd>
                    <dd class="">
                        <a href="/demo/panel.html">面板</a>
                    </dd>
                    <dd class="">
                        <a href="/demo/badge.html">徽章</a>
                    </dd>
                    <dd class="">
                        <a href="/demo/timeline.html">时间线</a>
                    </dd>
                    <dd class="">
                        <a href="/demo/table-element.html">静态表格</a>
                    </dd>
                    <dd class="">
                        <a href="/demo/anim.html">动画</a>
                    </dd>
                    <dd class="">
                        <a href="/demo/auxiliar.html">辅助元素</a>
                    </dd>
                </dl>
            </li>

            <li class="layui-nav-item layui-nav-itemed">
                <a class="javascript:;" href="javascript:;">组件示例</a>
                <dl class="layui-nav-child">
                    <dd class="">
                        <a href="/demo/layer.html">
                            弹出层
                        </a>
                    </dd>
                    <dd class="">
                        <a href="/demo/laydate.html">
                            日期与时间选择
                        </a>
                    </dd>
                    <dd class="">
                        <a href="/demo/layim.html">
                            即时通讯
                        </a>
                    </dd>
                    <dd class="">
                        <a href="/demo/table.html">
                            数据表格
                        </a>
                    </dd>
                    <dd class="layui-this">
                        <a href="/demo/laypage.html">
                            分页
                        </a>
                    </dd>
                    <dd class="">
                        <a href="/demo/upload.html">
                            文件上传
                        </a>
                    </dd>
                    <dd class="">
                        <a href="/demo/carousel.html">
                            轮播
                        </a>
                    </dd>
                    <dd class="">
                        <a href="/demo/laytpl.html">
                            模板引擎
                        </a>
                    </dd>

                    <dd class="">
                        <a href="/demo/flow.html">
                            流加载
                        </a>
                    </dd>
                    <dd class="">
                        <a href="/demo/util.html">
                            工具集
                        </a>
                    </dd>
                    <dd class="">
                        <a href="/demo/code.html">
                            代码修饰器
                        </a>
                    </dd>
                </dl>
            </li>

            <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
        </ul>

    </div>
</div>



<div id="LAY_democodejs">
    <script>
        layui.use(['laypage', 'layer'], function(){
            var laypage = layui.laypage
                ,layer = layui.layer;

            //总页数低于页码总数
            laypage.render({
                elem: 'demo0'
                ,count: 50 //数据总数
            });

            //总页数大于页码总数
            laypage.render({
                elem: 'demo1'
                ,count: 70 //数据总数
                ,jump: function(obj){
                    console.log(obj)
                }
            });

            //自定义样式
            laypage.render({
                elem: 'demo2'
                ,count: 100
                ,theme: '#1E9FFF'
            });
            laypage.render({
                elem: 'demo2-1'
                ,count: 100
                ,theme: '#FF5722'
            });
            laypage.render({
                elem: 'demo2-2'
                ,count: 100
                ,theme: '#FFB800'
            });

            //自定义首页、尾页、上一页、下一页文本
            laypage.render({
                elem: 'demo3'
                ,count: 100
                ,first: '首页'
                ,last: '尾页'
                ,prev: '<em>←</em>'
                ,next: '<em>→</em>'
            });

            //不显示首页尾页
            laypage.render({
                elem: 'demo4'
                ,count: 100
                ,first: false
                ,last: false
            });

            //开启HASH
            laypage.render({
                elem: 'demo5'
                ,count: 500
                ,curr: location.hash.replace('#!fenye=', '') //获取hash值为fenye的当前页
                ,hash: 'fenye' //自定义hash值
            });

            //只显示上一页、下一页
            laypage.render({
                elem: 'demo6'
                ,count: 50
                ,layout: ['prev', 'next']
                ,jump: function(obj, first){
                    if(!first){
                        layer.msg('第 '+ obj.curr +' 页');
                    }
                }
            });

            //完整功能
            laypage.render({
                elem: 'demo7'
                ,count: 100
                ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
                ,jump: function(obj){
                    console.log(obj)
                }
            });

            //自定义排版
            laypage.render({
                elem: 'demo8'
                ,count: 1000
                ,layout: ['limit', 'prev', 'page', 'next']
            });
            laypage.render({
                elem: 'demo9'
                ,count: 1000
                ,layout: ['prev', 'next', 'page']
            });
            laypage.render({
                elem: 'demo10'
                ,count: 1000
                ,layout: ['page', 'count']
            });

            //自定义每页条数的选择项
            laypage.render({
                elem: 'demo11'
                ,count: 1000
                ,limit: 100
                ,limits: [100, 300, 500]
            });


            //将一段数组分页展示

            //测试数据
            var data = [
                '北京',
                '上海',
                '广州',
                '深圳',
                '杭州',
                '长沙',
                '合肥',
                '宁夏',
                '成都',
                '西安',
                '南昌',
                '上饶',
                '沈阳',
                '济南',
                '厦门',
                '福州',
                '九江',
                '宜春',
                '赣州',
                '宁波',
                '绍兴',
                '无锡',
                '苏州',
                '徐州',
                '东莞',
                '佛山',
                '中山',
                '成都',
                '武汉',
                '青岛',
                '天津',
                '重庆',
                '南京',
                '九江',
                '香港',
                '澳门',
                '台北'
            ];

            //调用分页
            laypage.render({
                elem: 'demo20'
                ,count: data.length
                ,jump: function(obj){
                    //模拟渲染
                    document.getElementById('biuuu_city_list').innerHTML = function(){
                        var arr = []
                            ,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
                        layui.each(thisData, function(index, item){
                            arr.push('<li>'+ item +'</li>');
                        });
                        return arr.join('');
                    }();
                }
            });

        });
    </script>
</div>